import { useModel } from '@@/exports';
import { UserOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { Avatar, Card, Col, Descriptions, Row } from 'antd';
import React from 'react';

/**
 * 主页
 */
const Index: React.FC = () => {
  const { initialState, setInitialState } = useModel('@@initialState');
  const { currentUser } = initialState || {};

  return (
    <PageContainer className="user-center">
      <Row gutter={[16, 16]}>
        <Col span={12}>
          <Card>
            <Descriptions title="个人设置" column={1}>
              <Descriptions.Item label="账号">
                {currentUser?.userAccount ?? '暂无'}
              </Descriptions.Item>
              <Descriptions.Item label="头像">
                {currentUser?.userAccount ? (
                  <Avatar
                    size="small"
                    src="https://pic.selftaught.site/repo/1833767820131942401/gFhNybI2_RoxxVxka.png"
                  ></Avatar>
                ) : (
                  <Avatar size="small" icon={<UserOutlined />} />
                )}
              </Descriptions.Item>
            </Descriptions>
          </Card>
        </Col>
        <Col span={12}>
          <Card>
            <Descriptions title="我的信息" column={1}>
              <Descriptions.Item label="id">{currentUser?.id}</Descriptions.Item>
              <Descriptions.Item label="注册时间">{currentUser?.createTime}</Descriptions.Item>
            </Descriptions>
          </Card>
        </Col>
      </Row>
    </PageContainer>
  );
};

export default Index;
